<nav class="navbar navbar-default app-header" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button
        type="button"
        class="navbar-toggle"
        ng-click="isNavOpen = !isNavOpen"
      >
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- REDASH LOGO -->
      <a class="navbar-brand" ng-href="{{ $ctrl.basePath }}"
        ><img ng-src="{{ $ctrl.logoUrl }}"
      /></a>
    </div>
    <div class="collapse navbar-collapse" uib-collapse="!isNavOpen">
      <!-- Main Left Nav-->

      <ul class="nav navbar-nav nav__main">
        <li
          class="dropdown btn-group"
          ng-show="$ctrl.showDashboardsMenu"
          uib-dropdown
        >
          <a class="btn" href="dashboards">Dashboards</a>
          <a type="button" class="btn hidden-xs" uib-dropdown-toggle>
            <span class="caret caret--nav"></span>
          </a>
          <ul class="dropdown-menu" uib-dropdown-menu>
            <li ng-if="$ctrl.dashboards.length == 0">
              <a>
                <em>
                  <span class="btn-favourite">
                    <i class="fa fa-star" aria-hidden="true"></i>
                  </span>
                  Favorite Dashboards will appear here
                </em>
              </a>
            </li>
            <li ng-repeat="dashboard in $ctrl.dashboards">
              <a href="dashboard/{{ dashboard.slug }}">
                {{ dashboard.name }}
              </a>
            </li>
          </ul>
        </li>
        <li
          class="dropdown btn-group"
          ng-show="$ctrl.showQueriesMenu"
          uib-dropdown
        >
          <a class="btn" href="queries">Queries</a>
          <a type="button" class="btn hidden-xs" uib-dropdown-toggle>
            <span class="caret caret--nav"></span>
          </a>
          <ul class="dropdown-menu" uib-dropdown-menu>
            <li ng-if="$ctrl.queries.length == 0">
              <a>
                <em>
                  <span class="btn-favourite">
                    <i class="fa fa-star" aria-hidden="true"></i>
                  </span>
                  Favorite Queries will appear here
                </em>
              </a>
            </li>
            <li ng-repeat="query in $ctrl.queries">
              <a href="queries/{{ query.id }}">
                {{ query.name }}
              </a>
            </li>
          </ul>
        </li>
        <li ng-if="$ctrl.showAlertsLink">
          <a href="alerts">Alerts</a>
        </li>
      </ul>

      <!-- Add New Button -->
      <div
        class="btn-group navbar-btn navbar-left btn__new hidden-xs"
        uib-dropdown
        is-open="status.isopen"
      >
        <button
          id="create-button"
          data-test="CreateButton"
          type="button"
          class="btn btn-primary btn--create"
          uib-dropdown-toggle
          ng-disabled="disabled"
        >
          Create <span class="caret caret--nav"></span>
        </button>
        <ul
          class="dropdown-menu"
          uib-dropdown-menu
          role="menu"
          aria-labelledby="create-button"
        >
          <li role="menuitem" ng-show="$ctrl.showNewQueryMenu">
            <a href="queries/new">Query</a>
          </li>
          <li role="menuitem">
            <a
              ng-show="$ctrl.currentUser.hasPermission('create_dashboard')"
              ng-click="$ctrl.newDashboard()"
              >Dashboard</a
            >
          </li>
          <li role="menuitem"><a href="alerts/new">Alert</a></li>
        </ul>
      </div>

      <!-- Profile -->
      <ul class="nav navbar-nav navbar-right">
        <li>
          <help-trigger
            type="'HOME'"
            class-name="'navbar-link-ANGULAR_REMOVE_ME'"
          ></help-trigger>
        </li>
        <li ng-show="$ctrl.currentUser.isAdmin">
          <a href="data_sources" title="Settings"
            ><i class="fa fa-sliders" aria-hidden="true"></i
          ></a>
        </li>
        <!--<li ng-show="$ctrl.showSettingsMenu">-->
        <!--<a href="users" title="Settings"><i class="fa fa-cog"></i></a>-->
        <!--</li>-->
        <li class="dropdown" uib-dropdown>
          <a
            href="#"
            class="dropdown-toggle dropdown--profile"
            uib-dropdown-toggle
            data-test="ProfileDropdown"
          >
            <img
              ng-src="{{ $ctrl.currentUser.profile_image_url }}"
              class="profile__image--navbar"
              width="20"/>
            <span
              class="dropdown--profile__username"
              ng-bind="$ctrl.currentUser.name"
            ></span>
            <span class="caret caret--nav"></span
          ></a>
          <ul class="dropdown-menu dropdown-menu--profile">
            <li>
              <a ng-href="users/me">Edit Profile</a>
            </li>
            <li
              class="divider"
              ng-if="$ctrl.currentUser.hasPermission('super_admin')"
            ></li>

            <li ng-show="$ctrl.currentUser.isAdmin">
              <a href="data_sources" title="Data Sources">Data Sources</a>
            </li>
            <li ng-show="$ctrl.showSettingsMenu">
              <a href="groups" title="Settings">Groups</a>
            </li>
            <li ng-show="$ctrl.showSettingsMenu">
              <a href="users" title="Settings">Users</a>
            </li>
            <li>
              <a ng-href="query_snippets">Query Snippets</a>
            </li>
            <li ng-show="$ctrl.showSettingsMenu">
              <a href="destinations" title="Settings">Alert Destinations</a>
            </li>

            <li
              ng-if="$ctrl.currentUser.hasPermission('super_admin')"
              class="divider"
            ></li>

            <li ng-if="$ctrl.currentUser.hasPermission('super_admin')">
              <a href="admin/status">System Status</a>
            </li>

            <li class="divider"></li>

            <li>
              <a ng-click="$ctrl.logout()">Log out</a>
            </li>

            <li class="divider"></li>
            <li class="dropdown-menu__version">
              Version: {{ $ctrl.backendVersion }}
              <span ng-if="$ctrl.frontendVersion !== $ctrl.backendVersion">
                ({{ $ctrl.frontendVersion.substring(0, 8) }})
              </span>
              <span
                class="update-available"
                ng-if="$ctrl.currentUser.hasPermission('super_admin') && $ctrl.newVersionAvailable"
              >
                <a href="https://version.redash.io/" target="_blank">
                  <i class="fa fa-arrow-circle-down"></i>
                </a>
              </span>
            </li>
          </ul>
        </li>
      </ul>

      <!-- Search -->
      <form
        class="navbar-form navbar-right"
        role="search"
        ng-submit="$ctrl.searchQueries()"
      >
        <div class="input-group menu-search">
          <input
            type="text"
            ng-model="$ctrl.searchTerm"
            class="form-control navbar__search__input"
            placeholder="Search queries..."
            data-test="AppHeaderSearch"
          />
          <span class="input-group-btn">
            <button type="submit" class="btn btn-default">
              <span class="zmdi zmdi-search"></span>
            </button>
          </span>
        </div>
      </form>
    </div>
  </div>
</nav>
